
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            caret-color: transparent;
        }
        .container {
            background-color: #fff;
            border: 1px solid #e4e4e4;
            border-radius: 5px;
            width: 500px;
            border: 3px dotted #eee;
            margin: 0 auto;
            margin-top: 40px;
            margin-bottom: 40px;
            padding: 40px;
        }
        ul {
            margin-top: 20px;
        }
        .folder {
            height: 26px;
            width: 26px;
            background: url(./image/01.png) -594px -862px no-repeat;
            cursor: pointer;
            margin: auto;
            /* background-position: -50px 0; */
        }
        .file {
            height: 26px;
            width: 26px;
            background: url(./image/01.png)  -594px -68px no-repeat;
            cursor: pointer;
            margin: auto;
        }
        li {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;  
            margin-top: 10px;
            border-bottom: 1px solid #f2f6fd;
            padding-bottom: 10px;
            align-items: center;
        }
        li > * {
            flex: 1;
            text-align: center;
        }
        li a, li span {
            text-decoration: none;
            font-size: 12px;
            line-height: 26px;
            color: black;
            font-family: "Microsoft YaHei";
        }
        li span {
            /* margin-left: 50px; */
            width: 150px;
            text-align: center;
        }
        li a {
            width: 50px;
            text-align: center;
        }
        li .del {
            margin-right: 0px!important;
        }
        .title {
            display: flex;
            /* display: -webkit-flex; */
            font-size: 12px;
            width: 100%;
            text-align: center;
            /* justify-content: space-around; */
            /* margin-left: 60px; */
        }
        .title span {
            flex: 1;
        }
        .back {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            background-color: aqua;
            color: white;
            font-weight: 700;
            font-size: large;
            position: fixed;
            right: 300px;
            bottom: 100px;
            cursor: pointer;
        }
        .text {
            width: 60%;
            height: 500px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            font-size: 20px;
            caret-color: black;
            padding: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <button class="back" onclick="backEvent()">back</button>
    <textarea name="" id="" cols="30" rows="10" class="text"></textarea>
    <div class="container">
        <div class="title">
            <span>类型</span>
            <span>文件名</span>
            <span>大小</span>
            <span>时间</span>
            <span>操作</span>
        </div>
        <ul id="list">

        </ul> 
    </div>
</body>
<script>
    let arrHistory = [];
    let fetchContent = new Promise(async (rv , rj) => {
        await fetch("http://192.168.42.166:3000/getlist")
        .then(res => res.json())
        .then(data => {
            console.log(data);
            arrHistory.push(data);
            listContent(data);
        });
        rv();
    });

    function listContent(data) {
        let list = document.getElementById("list");
        let content = '';
        
        data.forEach(item => {
            // console.log(item);
            // console.log(JSON.stringify(item));
            let li = `
            <li>
                <div name = ${item.fileName} class = "${item.fileType}Frame">
                    <div class="${item.fileType}" data = '${JSON.stringify(item)}' path = ${item.filePath} ></div>
                </div>
                <a href="">${item.fileName}</a>
                <span>${item.fileSize}</span>
                <span>${item.fileTime}</span>
                <a href="" class="del" id="dlerer">删除</a>
            </li>
            `
            content += li;
        });
        list.innerHTML = content;
        let folderList = document.getElementsByClassName("folder");
        for(let i = 0 ; i < folderList.length ; i++) {
            folderList[i].onclick = (e) => {
                // console.log(e.target.getAttribute("data"));
                // console.log(JSON.parse(e.target.getAttribute("data")));
                arrHistory.push(JSON.parse(e.target.getAttribute("data")).list);
                listContent(JSON.parse(e.target.getAttribute("data")).list);
                console.log(e.target.getAttribute("path"));
            }
        }
        let filelist = document.getElementsByClassName("file");
        for(let i = 0 ;  i < filelist.length ; i++) {
            filelist[i].onclick = (e) => {
                console.log(e.target.getAttribute("path"));
                fetch("http://192.168.42.166:3000/readFile", {method: "POST" , body: e.target.getAttribute("path")})
                    .then(res => 
                        res.text()
                    ).then(res => {
                        console.log(res);
                        let text = document.getElementsByClassName("text")[0];
                        text.style.display = 'block';
                        text.value = res;
                    })
            }
        }
    }
    function openDir(e) {
        consol.log(123456);
    }
    function backEvent() {
        // console.log(123456);
        if(arrHistory.length > 1) {
            arrHistory.pop();
            console.log(123456);
            console.log(arrHistory);
            listContent(arrHistory[arrHistory.length-1]);
        }
    }
</script>

</html>